import React, { useEffect, useRef, useState } from 'react'
import { nanoid } from 'nanoid'
import Footer from './components/Footer/Footer'
import Header from './components/Header/Header'
import List from './components/List/List'
import './App.css'
export default function App() {
    let [todos, setTodos] = useState([]);
    let flagRef = useRef(true);  // flagRef = {current:true}
    console.log(flagRef);

    useEffect(() => { // 
        if (flagRef.current) {
            flagRef.current = false;
            let todos = JSON.parse(localStorage.getItem('todos')) || []
            setTodos(todos);
            return;
        }
        // componentDidUpdate 独享
        localStorage.setItem('todos', JSON.stringify(todos))
    }, [todos])

    const addTodo = (title) => {
        const todo = {
            id: nanoid(),
            title,
            isDone: false
        }
        setTodos([todo, ...todos])
    }
    // 根据id删除todo
    const deleteTodo = (id) => {
        if (!window.confirm('确认删除么?')) return;
        let newTodos = todos.filter(todo => todo.id !== id);
        setTodos(newTodos);
    }

    // checkDone
    const checkDone = (todo) => {
        todo.isDone = !todo.isDone;
        // todo的isDone的值改变了，但是todos的引用地址并没有变，所以需要复制一个todos，触发页面更新
        setTodos([...todos]);
    }
    // 全选反选
    const checkAll = isDone => {
        let newTodos = todos.map(todo => {
            todo.isDone = isDone
            return todo
        })
        setTodos(newTodos);
    }

    // 清除已完成
    const deleteDone = () => {
        if (!window.confirm('确定全部删除么?')) return;
        let newTodos = todos.filter(todo => !todo.isDone)
        setTodos(newTodos);
    }
    return (
        <div className="todo-container">
            <div className="todo-wrap">
                <Header addTodo={addTodo} />
                <List todos={todos} deleteTodo={deleteTodo} checkDone={checkDone} />
                <Footer todos={todos} checkAll={checkAll} deleteDone={deleteDone} />
            </div>
        </div>
    )
}
